<template>
  <div>
    <div class="layout">
      <Layout :style="{minHeight: '100vh'}">

        <Sider collapsible
               :collapsed-width="78"
               v-model="isCollapsed">
          <Menu active-name="1-2"
                theme="dark"
                width="auto"
                :class="menuitemClasses">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                Item 1
              </template>
              <MenuItem name="1-1">Option 1</MenuItem>
              <MenuItem name="1-2">Option 2</MenuItem>
              <MenuItem name="1-3">Option 3</MenuItem>
            </Submenu>

            <MenuItem name="1-1">
            <Icon type="ios-navigate"></Icon>
            <span>Option 1</span>
            </MenuItem>
            <MenuItem name="1-2">
            <Icon type="search"></Icon>
            <span>Option 2</span>
            </MenuItem>
            <MenuItem name="1-3">
            <Icon type="settings"></Icon>
            <span>Option 3</span>
            </MenuItem>
          </Menu>
        </Sider>

        <Layout>
          <Header>
            <Menu mode="horizontal"
                  theme="dark"
                  active-name="1">
              <div class="layout-logo"></div>
              <div class="layout-nav">
                <MenuItem name="1">
                <Icon type="ios-navigate"></Icon>
                Item 1
                </MenuItem>
                <MenuItem name="2">
                <Icon type="ios-keypad"></Icon>
                Item 2
                </MenuItem>
                <MenuItem name="3">
                <Icon type="ios-analytics"></Icon>
                Item 3
                </MenuItem>
                <MenuItem name="4">
                <Icon type="ios-paper"></Icon>
                Item 4
                </MenuItem>
              </div>
            </Menu>
          </Header>
          <Content :style="{padding: '0 50px'}">
            <Breadcrumb :style="{margin: '20px 0'}">
              <BreadcrumbItem>Home</BreadcrumbItem>
              <BreadcrumbItem>Components</BreadcrumbItem>
              <BreadcrumbItem>Layout</BreadcrumbItem>
            </Breadcrumb>
            <Card>
              <div style="min-height: 200px;">
                Content
                <Input search
                       enter-button
                       placeholder="Enter something..."
                       style="width:400px;" />
                <Input type="number"
                       number
                       style="width:400px;" />
                <Table stripe
                       border
                       ref="selection"
                       :columns="columns"
                       :data="data"></Table>
                <Button @click="handleSelectAll(true)">Set all selected</Button>
                <Button @click="handleSelectAll(false)">Cancel all selected</Button>

                <Button type="primary"
                        size="large"
                        @click="exportData(1)">
                  <Icon type="ios-download-outline"></Icon> Export source data
                </Button>
                <Button type="primary"
                        size="large"
                        @click="exportData(2)">
                  <Icon type="ios-download-outline"></Icon> Export sorting and filtered data
                </Button>
                <Button type="primary"
                        size="large"
                        @click="exportData(3)">
                  <Icon type="ios-download-outline"></Icon> Export custom data
                </Button>
              </div>
            </Card>
          </Content>
          <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapsed: false,
      columns: [
        {
          type: 'selection'
        },
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age',
          //排序
          sortable: true,
          //筛选
          filters: [
            {
              label: '大于 25',
              value: 1
            },
            {
              label: '小于 25',
              value: 2
            }
          ],
          //设置单选，默认为多选
          filterMultiple: false,
          filterMethod (value, row) {
            if (value === 1) {
              return row.age > 25;
            } else if (value === 2) {
              return row.age < 25;
            }
          }
        },
        {
          title: 'Address',
          key: 'address',
          filters: [
            {
              label: 'New York',
              value: 'New York'
            },
            {
              label: 'London',
              value: 'London'
            },
            {
              label: 'Sydney',
              value: 'Sydney'
            }
          ],
          filterMethod (value, row) {
            return row.address.indexOf(value) > -1;
          }
        }
      ],
      data: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    };
  },
  computed: {
    menuitemClasses: function () {
      return [
        'submenu',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status);
    },
    exportData (type) {
      if (type === 1) {
        this.$refs.selection.exportCsv({
          filename: 'The original data'
        });
      } else if (type === 2) {
        this.$refs.selection.exportCsv({
          filename: 'Sorting and filtering data',
          original: false
        });
      } else if (type === 3) {
        this.$refs.selection.exportCsv({
          filename: 'Custom data',
          columns: this.columns.filter((col, index) => index < 4),
          data: this.data.filter((data, index) => index < 4)
        });
      }
    }
  }
}
</script>

<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>
